<template>
  <div class="layout__dynamic">
    <div class="video-card" v-for="item in dynamic.data">
      <VideoCard3 :data="item"></VideoCard3>
    </div>
    <div>
      <el-button
        type="primary"
        text
        bg
        @click="loadData"
        v-if="!dynamic.noMore"
      >
        加载更多
      </el-button>
      <span v-else style="color: grey">没有更多了</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import VideoCard3 from "@/components/VideoCard3.vue";
import videoApi from "@/api/video";
import { Result } from "@/types/common";
import { Video } from "@/types/video";

type dmcType = {
  data: Video[];
  noMore: boolean;
  pageIndex: number;
  pageSize: number;
};
const dynamic = ref<dmcType>({
  data: [],
  noMore: false,
  pageIndex: 1,
  pageSize: 10,
});

const loadData = () => {
  let params = {
    pageIndex: dynamic.value.pageIndex,
    pageSize: dynamic.value.pageSize,
  };
  videoApi.getDynamic(params).then((res) => {
    let result: Result<Video[]> = res.data;
    if (result.code === 0) {
      if (result.data.length < dynamic.value.pageSize) {
        dynamic.value.noMore = true;
      }
      dynamic.value.pageIndex++;
      dynamic.value.data = dynamic.value.data.concat(result.data);
    }
  });
};

onMounted(() => {
  loadData();
});
</script>

<style scoped lang="scss">
.layout__dynamic {
  .video-card {
    margin-top: 25px;
    margin-bottom: 10px;
  }
  & > div:last-child {
    margin-top: 20px;
    margin-left: 50px;
  }
}
</style>
